<template>
  <div>
    <el-dialog title="修改记录" :visible.sync="dialogTableVisible0" width="80%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="item-info base-info">
            <div class="left-info">
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>所属单位层级
                </span>
                <select
                  v-model="detailData.danwei1"
                  :disabled="dotype=='4'||dotype=='3'"
                  @change="getSelectList('10', 'danwei2Arr',detailData.danwei1);"
                >
                  <option value="undefined">请选择</option>
                  <option
                    :value="item.hash.code_id"
                    v-for="item in danwei1Arr"
                    :key="item.id"
                  >{{item.hash.code_name}}</option>
                </select>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>所属单位
                </span>
                <select :disabled="dotype=='4'||dotype=='3'" v-model="detailData.danwei2">
                  <option value="undefined">请选择</option>
                  <option
                    :value="item.hash.code_id"
                    v-for="item in danwei2Arr"
                    :key="item.id"
                  >{{item.hash.code_name}}</option>
                </select>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>资产编号
                </span>

                <input
                  type="text"
                  v-model="detailData.zcbh"
                  disabled
                  :class="{xiugai:detailData1.zcbh}"
                />
                <div class="upload-btn" v-if="this.dotype=='1'">
                  <b class="code" @click="newhcode">生成编号</b>
                </div>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房产地址
                </span>
                <input
                  type="text"
                  v-model="detailData.haddr"
                  :disabled="dotype=='4'||dotype=='3'"
                  :class="{xiugai:detailData1.haddr}"
                  v-validate="'required'"
                  name="房产地址"
                />
                <b class="errorMes">{{ errors.first('房产地址') }}</b>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>是否有产证
                </span>
                <select
                  v-model="detailData.iscert"
                  :disabled="dotype=='4'||dotype=='3'"
                  @change="checkiscert(detailData.iscert)"
                >
                  <option value="undefined">请选择</option>
                  <option value="是">是</option>
                  <option value="否">否</option>
                </select>
                <div class="upload-btn">
                  <test
                    localfiletype="02"
                    tn="certpaper"
                    :imagefile.sync="this.detailData"
                    :isupload="dotype"
                  >上传产证</test>
                </div>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>产证编号
                </span>
                <input
                  type="text"
                  v-model="detailData.certnum"
                  :class="{xiugai:detailData1.certnum}"
                  :disabled="detailData.iscert=='否'||dotype=='4'||dotype=='3'"
                />
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>产证面积(平方米)
                </span>
                <input
                  type="text"
                  v-model="detailData.areabuild1"
                  :class="{xiugai:detailData1.areabuild1}"
                  :disabled="detailData.iscert=='否'||dotype=='4'||dotype=='3'"
                  v-validate="'required|decimal'"
                  name="产证面积"
                />
                <b class="errorMes">{{ errors.first('产证面积') }}</b>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>占地面积(平方米)
                </span>
                <input
                  type="text"

                  v-model="detailData.zdmj"
                  :class="{xiugai:detailData1.zdmj}"
                  :placeholder="(dotype=='4'||dotype=='3')?'':'请输入'"
                  :disabled="dotype=='4'||dotype=='3'"
                  onkeyup="value=value.replace(/[^\d^\.]+/g,'')"
                  v-validate="'required'"
                  name="占地面积"
                />
                <b class="errorMes">{{ errors.first('占地面积') }}</b>
              </div>
              <div class="item">
                <span>权利人</span>
                <input
                  type="text"
                  :disabled="dotype=='4'||dotype=='3'"
                  v-model="detailData.qlr"
                  :class="{xiugai:detailData1.qlr}"
                />
              </div>
              <div class="item">
                <span>管理单位</span>
                <input
                  type="text"
                  disabled
                  v-model="detailData.glorg"
                  :class="{xiugai:detailData1.glorg}"
                />
              </div>
              <div class="item">
                <span>物业单位</span>
                <input
                  type="text"
                  :disabled="dotype=='4'||dotype=='3'"
                  v-model="detailData.runorg"
                  :class="{xiugai:detailData1.runorg}"
                />
              </div>
              <div class="item">
                <span>估值单位</span>
                <input
                  type="text"
                  :disabled="dotype=='4'||dotype=='3'"
                  v-model="detailData.evalorg"
                  :class="{xiugai:detailData1.evalorg}"
                />
              </div>
            </div>
            <div class="right-info" style="margin-top:10px">
              <span style="float:left;display:block;width: 140px;color: #333;font-weight: 600;">房产图片</span>
              <div class="upload" style="margin-left:140px">
                <div class="avatar" style="padding-top:20px">
                  <ul>
                    <li>
                      <test
                        tn="image1"
                        localfiletype="02"
                        :imagefile="this.detailData"
                        :isupload="dotype"
                      >房产图片1</test>
                    </li>
                    <li>
                      <test
                        tn="image2"
                        localfiletype="02"
                        :imagefile="this.detailData"
                        :isupload="dotype"
                      >房产图片2</test>
                    </li>
                    <li>
                      <test
                        tn="image3"
                        localfiletype="02"
                        :imagefile="this.detailData"
                        :isupload="dotype"
                      >房产图片3</test>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="item">
                <span>资产估值(万元)</span>
                <input
                  type="text"
                  :disabled="dotype=='4'||dotype=='3'"
                  v-model="detailData.evalue1"
                  :class="{xiugai:detailData1.evalue1}"
                />
              </div>
              <div class="item icon">
                <span>基准日期</span>
                <el-date-picker
                  disabled
                  type="date"
                  v-model="detailData.jzdate"
                  placeholder="选择日期"
                  valueFormat="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                ></el-date-picker>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="房屋信息" name="second">
          <div class="item-info base-info">
            <div class="left-info">
              <div class="item" v-if="this.dotype!='1'">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋编号
                </span>
                <input
                  type="text"
                  v-model="houseData.detailnum"
                  :class="{xiugai: houseData1.detailnum}"
                  readonly
                >
                <b class="code" @click="newfwcode" v-if="(dotype=='1'||dotype=='2')||ishowfwbh">生成房屋编号</b>
              </div>

              <div class="item spec clearfix">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋实测面积
                  <br>(平方米)
                </span>
                <div class="text">
                  <input type="text" value="有证" readonly>
                  <input type="text" :class="{xiugai: houseData1.area1}" v-model="fwarea1" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
                    :readonly="dotype=='4'||dotype=='3'"
                  >
                </div>
                <div class="text">
                  <input type="text" value="无证" readonly>
                  <input type="text" :class="{xiugai: houseData1.area2}" v-model="fwarea2" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)"
                    :readonly="dotype=='4'||dotype=='3'"
                  >
                </div>
              </div>
              <!-- <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>占地面积(平方米)
                </span>
                <input type="text" v-model="houseData.zdmj" disabled>
              </div> -->
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋结构
                </span>
                <select
                  v-model="houseData.dstruct"
                  :class="{xiugai:houseData1.dstruct}"
                  :disabled="dotype=='4'||dotype=='3'"
                >
                  <option value="undefined" selected style="display:none;">请选择</option>
                  <option
                    :value="item.hash.code_id"
                    v-for="item in horgArr"
                    :key="item.id"
                  >{{item.hash.code_name}}</option>
                </select>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋状态
                </span>
                <select
                  v-model="houseData.dstatus"
                  :class="{xiugai:houseData1.dstatus}"
                  :disabled="dotype=='4'||dotype=='3'"
                >
                  <option value="undefined" selected style="display:none;">请选择</option>
                  <option
                    :value="item.hash.code_id"
                    v-for="item in hstatusArr"
                    :key="item.id"
                  >{{item.hash.code_name}}</option>
                </select>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>楼层数量
                </span>
                <input
                  type="text"
                  :disabled="dotype=='4'||dotype=='3'"
                  v-model="houseData.floornum"
                  :class="{xiugai:houseData1.floornum}"
                  oninput = "value=value.replace(/[^\d]/g,'')"
                  :placeholder="(dotype=='4'||dotype=='3')?'':'请输入'"
                  v-validate="'required|decimal'"
                  name="楼层数量"
                >
                <b class="errorMes">{{ errors.first('楼层数量') }}</b>
              </div>

              <div class="item icon">
                <span>建筑年限</span>
                <el-date-picker
                  type="month"
                  :disabled="dotype=='4'||dotype=='3'"
                  v-model="houseData.buildtime"
                  :placeholder="(dotype=='4'||dotype=='3')?'':'请选择'"
                  valueFormat="yyyy-MM"
                  style="width:300px;border-color:#ccc"
                ></el-date-picker>
              </div>
              <div class="item" style="margin-top:10px">
                <span>建筑年数</span>
                <input type="text" v-model="buildyears" :class="{xiugai:houseData1.buildyears}" disabled>
              </div>
              <div class="item">
                <span>
                  <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>权属性质
                </span>
                <select
                  v-model="houseData.owntype"
                  :class="{xiugai:houseData1.owntype}"
                  :disabled="dotype=='4'||dotype=='3'"
                  :placeholder="(dotype=='4'||dotype=='3')?'':'请选择'"
                >
                  <option value="undefined" selected style="display:none;">请选择</option>
                  <option
                    :value="item.hash.code_id"
                    v-for="item in owntypeArr"
                    :key="item.id"
                  >{{item.hash.code_name}}</option>
                </select>
              </div>
            </div>
            <div class="right-info">
              <span style="float:left;display:block;width: 140px;color: #333;font-weight: 600;">房屋图片</span>
              <div class="upload" style="margin-left:140px">
                <div class="avatar" style="padding-top:20px">
                  <ul>
                    <li>
                      <test
                        tn="img1"
                        localfiletype="02"
                        :imagefile="this.houseData"
                        :isupload="dotype"
                      >房屋图片1</test>
                    </li>
                    <li>
                      <test
                        tn="img2"
                        localfiletype="02"
                        :imagefile="this.houseData"
                        :isupload="dotype"
                      >房屋图片2</test>
                    </li>
                    <li>
                      <test
                        tn="img3"
                        localfiletype="02"
                        :imagefile="this.houseData"
                        :isupload="dotype"
                      >房屋图片3</test>
                    </li>
                  </ul>
                </div>

              </div>
              <div class="item textarea">
                <span>房屋备注</span>
                <textarea type="text" v-model="houseData.remark"></textarea>
              </div>
            </div>
          </div>
          <div class="info-list">
            <table width="100%" class="table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>房屋编号</th>
                  <th>房屋有证实测面积(平方米)</th>
                  <th>房屋无证实测面积(平方米)</th>
                  <!-- <th>占地面积(平方米)</th> -->
                  <th>房屋状态</th>
                  <th>审核状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-if="houseList.length==0">
                  <td colspan="10">暂无数据</td>
                </tr>
                <tr
                  v-else
                  v-for="(item,index) in houseList"
                  :key="item.id"
                  :class="{xiugai2:item.hash.detailnumstatus=='0',xiugai:item.hash.detailnumstatus=='1'}"
                >
                  <td>{{index+1}}{{item.hash.detailnumstatus}}</td>
                  <td>{{item.hash.detailnum}}</td>
                  <td>{{item.hash.area1}}</td>
                  <td>{{item.hash.area2}}</td>
                  <!-- <td>{{item.hash.zdmj}}</td> -->
                  <td>{{item.hash.dstatusname}}</td>
                  <td>
                    <span v-if="item.hash.checkstatus==1">待审核</span>
                    <span v-else-if="item.hash.checkstatus==2">审核通过</span>
                    <span v-else-if="item.hash.checkstatus==3" style="color:#f60">审核不通过</span>
                    <span v-else style="color:rgb(114, 218, 104)">已归档</span>
                  </td>
                  <td>
                    <span style="color:blue;margin-right:6px" @click="checkhouse(item)">查看</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用途信息" name="third">
          <div class="info-list" style="border-top:0;margin-top:0;margin-bottom:20px">
            <div class="title">用途信息明细表</div>
            <table width="100%" class="table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>用途编号</th>
                  <th>日期</th>
                  <th>联系人</th>
                  <th>房产用途</th>
                  <th>房屋编号</th>
                  <th>总面积(平方米)</th>
                  <th>有证使用面积(平方米)</th>
                  <th>无证使用面积(平方米)</th>
                  <!-- <th>占地面积(平方米)</th> -->
                  <th>创建人</th>
                  <th>审核人</th>
                  <th>归档人</th>
                  <th style="width:100px"> 状态</th>
                  <th style="width:100px">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-if="renttable.length==0">
                  <td colspan="13">暂无数据</td>
                </tr>
                <tr v-for="(item,index) in renttable" :key="item.id" v-else :class="{xiugai2:item.hash.rentidstatus=='0',xiugai:item.hash.rentidstatus=='1'}">
                  <td>{{index+1}}</td>
                  <td>{{item.hash.rentnum}}</td>
                  <td>{{item.hash.intime}}</td>
                  <td>{{item.hash.linkman}}</td>
                  <td>{{item.hash.usetypename}}</td>
                  <td>{{item.hash.detailnum}}</td>
                  <td>{{Number(item.hash.area1) + Number(item.hash.area2)}}</td>
                  <td>{{item.hash.area1}}</td>
                  <td>{{item.hash.area2}}</td>
                  <!-- <td>{{item.hash.zdmj}}</td> -->
                  <td>{{item.hash.op}}</td>
                  <td>{{item.hash.checker}}</td>
                  <td>{{item.hash.deluser}}</td>
                  <td>{{item.hash.statusname}}</td>
                  <td>
                    <span style="color:blue;margin-right:6px" @click="checkrent(item)">查看</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="item-info rent-info">
            <div class="left-info">
              <div class="item">
                <span>
                  用途类型
                </span>
                {{rentlist.usetypename}}
              </div>
              <div class="item spec">
                <span>
                  <i>*</i>使用面积
                  <br>(平方米)
                </span>
                <div class="text">
                  <input type="text" value="有证" readonly>
                  <input type="text" v-model="rentlist.area1" readonly>
                </div>
                <div class="text">
                  <input type="text" value="无证" readonly>
                  <input type="text" v-model="rentlist.area2" readonly>
                </div>
              </div>
              <div class="item">
                <span>
                  <i>*</i>使用性质
                </span>
                <select v-model="rentlist.usenature" disabled>
                  <option value="undefined" selected style="display:none;">请选择</option>
                  <option
                    :value="item.hash.code_id"
                    v-for="item in shiyongArr"
                    :key="item.id"
                  >{{item.hash.code_name}}</option>
                </select>
              </div>

              <div class="item" style="height:40px;line-height:40px" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>承租人
                </span>
                <input type="text" v-model="rentlist.tname" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>承租人类型</span>
                <input type="text" v-model="rentlist.rentertype" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>注册地址</span>
                <input type="text" v-model="rentlist.regaddr" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>单位信用等级</span>
                <input type="text" v-model="rentlist.creditlev" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>单位性质</span>
                <input type="text" v-model="rentlist.naturer" disabled>
              </div>
              <div class="item">
                <span>
                  联系人
                </span>
                <input type="text" v-model="rentlist.contactor" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  联系方式
                </span>
                <input type="text" v-model="rentlist.contact" disabled>
              </div>
              <div class="item spec clearfix" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  职工
                  <br>(数量)
                </span>
                <div class="text">
                  <input type="text" value="外来" disabled>
                  <input type="text" v-model="rentlist.employee2" disabled>
                </div>
                <div class="text">
                  <input type="text" value="本地" disabled>
                  <input type="text" v-model="rentlist.employee1" disabled>
                </div>
              </div>
              <div class="item textarea">
                <span>备注</span>
                <textarea type="text" v-model="rentlist.remark" disabled></textarea>
              </div>

            </div>
            <div class="right-info">
              <div class="item">
                <span>
                  房屋编号
                </span>
                <b v-for="(item, index) in rentlist2" :key="index">
                  {{item.hash.detailnum}}（ {{item.hash.rentarea1}}， {{item.hash.rentarea2}}）
                </b>

              </div>

              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>合同期限
                </span>
                {{rentlist.rentstart}} 至 {{rentlist.rentend}}
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'">
                <span>
                  <i>*</i>使用期限
                </span>
                {{rentlist.rentstart}} 至 {{rentlist.rentend}}
              </div>
              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>租金(元)
                </span>
                <input type="text" v-model="rentlist.rentfee" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>押金(元)
                </span>
                <input type="text" v-model="rentlist.deposit" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span>
                  平均日租金/㎡(元)
                </span>
                <input type="text" v-model="rentdayfee" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span></span>
                <input type="text" v-model="renttime" disabled style="width:40%">
                <input type="text" style="width:10%" value="天" disabled>
              </div>


              <div class="item textarea" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>证照应用范围</span>
                <textarea type="text" v-model="rentlist.rentuse" disabled></textarea>
              </div>
              <div class="item textarea" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>实际经营情况</span>
                <textarea type="text" v-model="rentlist.actureuse" disabled></textarea>
              </div>
              <section style="margin:20px 0 100px 0" v-if="rentlist.usetypename=='租赁'">
                <p style="font-weight:bold;margin-bottom:20px">附件</p>
                <div class="upload-btn" style="margin-left:120px;width:90px;color:#333;text-align:left;">
                  <test v-if="isreload" tn="rentagreement" localfiletype="02" :imagefile="this.rentlist"
                    :isupload="handletype"
                  >合同上传</test>
                </div>
                <div class="upload-btn" style="margin-left:100px;width:90px;color:#333;text-align:left;width:100px">
                  <test v-if="isreload" tn="rentuseattach" localfiletype="02" :imagefile="this.rentlist"
                    :isupload="handletype"
                  >租户照片上传</test>
                </div>
                <div class="upload-btn" style="margin-left:100px;width:90px;color:#333;text-align:left;width:130px">
                  <test v-if="isreload" tn="actureuseattach" localfiletype="02" :imagefile="this.rentlist"
                    :isupload="handletype"
                  >租户营业执照上传</test>
                </div>
              </section>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="租金信息" name="four">
          <!-- <div class="item-info rent-info">
            <div class="left-info">
              <div class="item">
                <span>
                  用途类型
                </span>
                {{rentlist.usetypename}}
              </div>
              <div class="item spec">
                <span>
                  <i>*</i>使用面积
                  <br>(平方米)
                </span>
                <div class="text">
                  <input type="text" value="有证" readonly>
                  <input type="text" v-model="rentlist.area1" readonly>
                </div>
                <div class="text">
                  <input type="text" value="无证" readonly>
                  <input type="text" v-model="rentlist.area2" readonly>
                </div>
              </div>
              <div class="item">
                <span>
                  <i>*</i>使用性质
                </span>
                <select v-model="rentlist.usenature" disabled>
                  <option value="undefined" selected style="display:none;">请选择</option>
                  <option
                    :value="item.hash.code_id"
                    v-for="item in shiyongArr"
                    :key="item.id"
                  >{{item.hash.code_name}}</option>
                </select>
              </div>

              <div class="item" style="height:40px;line-height:40px" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>承租人
                </span>
                <input type="text" v-model="rentlist.tname" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>承租人类型</span>
                <input type="text" v-model="rentlist.rentertype" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>注册地址</span>
                <input type="text" v-model="rentlist.regaddr" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>单位信用等级</span>
                <input type="text" v-model="rentlist.creditlev" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>单位性质</span>
                <input type="text" v-model="rentlist.naturer" disabled>
              </div>
              <div class="item">
                <span>
                  联系人
                </span>
                <input type="text" v-model="rentlist.contactor" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  联系方式
                </span>
                <input type="text" v-model="rentlist.contact" disabled>
              </div>
              <div class="item spec clearfix" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  职工
                  <br>(数量)
                </span>
                <div class="text">
                  <input type="text" value="外来" disabled>
                  <input type="text" v-model="rentlist.employee2" disabled>
                </div>
                <div class="text">
                  <input type="text" value="本地" disabled>
                  <input type="text" v-model="rentlist.employee1" disabled>
                </div>
              </div>
              <div class="item textarea">
                <span>备注</span>
                <textarea type="text" v-model="rentlist.remark" disabled></textarea>
              </div>

            </div>
            <div class="right-info">
              <div class="item">
                <span>
                  房屋编号
                </span>
                <b v-for="(item, index) in rentlist2" :key="index">
                  {{item.hash.detailnum}}（ {{item.hash.rentarea1}}， {{item.hash.rentarea2}}）
                </b>

              </div>

              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>合同期限
                </span>
                {{rentlist.rentstart}} 至 {{rentlist.rentend}}
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'">
                <span>
                  <i>*</i>使用期限
                </span>
                {{rentlist.rentstart}} 至 {{rentlist.rentend}}
              </div>
              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>租金(元)
                </span>
                <input type="text" v-model="rentlist.rentfee" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>
                  <i>*</i>押金(元)
                </span>
                <input type="text" v-model="rentlist.deposit" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span>
                  平均日租金/㎡(元)
                </span>
                <input type="text" v-model="rentdayfee" disabled>
              </div>
              <div class="item" v-if="rentlist.usetypename=='租赁'">
                <span></span>
                <input type="text" v-model="renttime" disabled style="width:40%">
                <input type="text" style="width:10%" value="天" disabled>
              </div>


              <div class="item textarea" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>证照应用范围</span>
                <textarea type="text" v-model="rentlist.rentuse" disabled></textarea>
              </div>
              <div class="item textarea" v-if="rentlist.usetypename=='无偿使用'||rentlist.usetypename=='租赁'">
                <span>实际经营情况</span>
                <textarea type="text" v-model="rentlist.actureuse" disabled></textarea>
              </div>
              <section style="margin:20px 0 100px 0" v-if="rentlist.usetypename=='租赁'">
                <p style="font-weight:bold;margin-bottom:20px">附件</p>
                <div class="upload-btn" style="margin-left:120px;width:90px;color:#333;text-align:left;">
                  <test v-if="isreload" tn="rentagreement" localfiletype="02" :imagefile="this.rentlist"
                    :isupload="handletype"
                  >合同上传</test>
                </div>
                <div class="upload-btn" style="margin-left:100px;width:90px;color:#333;text-align:left;width:100px">
                  <test v-if="isreload" tn="rentuseattach" localfiletype="02" :imagefile="this.rentlist"
                    :isupload="handletype"
                  >租户照片上传</test>
                </div>
                <div class="upload-btn" style="margin-left:100px;width:90px;color:#333;text-align:left;width:130px">
                  <test v-if="isreload" tn="actureuseattach" localfiletype="02" :imagefile="this.rentlist"
                    :isupload="handletype"
                  >租户营业执照上传</test>
                </div>
              </section>
            </div>
          </div> -->
          <div class="info-list" style="padding:20px;border-top:0">
            <div class="title">租金信息明细表</div>
            <el-table
              :data="renttable7"
              :rowStyle="rowStyle"
              border
              style="width:100%;margin:20px auto"
              @selection-change="handleSelectionChange2"
            >
              <el-table-column type="index" width="50" label="序号"></el-table-column>
              <el-table-column prop="hash.detailnum" label="房屋编号"></el-table-column>
              <el-table-column prop="hash.renter" label="承租人"></el-table-column>
              <el-table-column prop="hash.zjnd" label="租金年度"></el-table-column>
              <el-table-column label="收租期限">
                <template slot-scope="scope">
                  <span v-if="scope.row.hash.feestart&&scope.row.hash.feeend">{{scope.row.hash.feestart}}至{{scope.row.hash.feeend}}({{scope.row.hash.szqx}}天)</span>
                  <span v-else></span>
                </template>
              </el-table-column>
              <el-table-column label="日租金/㎡" prop="daymoney">
                <template slot-scope="scope">
                  <span v-if="scope.row.hash.feeyear">{{scope.row.hash.daymoney=(Number(scope.row.hash.feeyear)/Number(scope.row.hash.szqx)/(Number(scope.row.hash.area1)+Number(scope.row.hash.area2))).toFixed(2)}}</span>
                  <span v-else></span>
                </template>
              </el-table-column>
              <el-table-column label="应收租金(元)">
                <template slot-scope="scope">
                  <span>{{scope.row.hash.feeyear}}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="hash.realfee" label="实收租金(元)"></el-table-column> -->
              <el-table-column prop="hash.area1" label="有证面积(平方米)"></el-table-column>
              <el-table-column prop="hash.area2" label="无证面积(平方米)"></el-table-column>
              <el-table-column label="租金类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.hash.feetype=='1'">合同</span>
                  <span v-else-if="scope.row.hash.feetype=='2'">冲正</span>
                  <span v-else>退租(手续费{{scope.row.hash.servicefee}})</span>
                </template>
              </el-table-column>
              <el-table-column label="审核状态" prop="hash.statusname">
                <!-- <template slot-scope="scope">
                  <span v-if="scope.row.hash.status=='0'">用途待审核</span>
                  <span v-else-if="scope.row.hash.status=='4'" style="color:#f60">待审核</span>
                  <span v-else-if="scope.row.hash.status=='1'">审核通过</span>
                  <span v-else-if="scope.row.hash.status=='5'" style="color:#f60">审核不通过</span>
                  <span v-else-if="scope.row.hash.status=='9'">已删除</span>
                  <span v-else>已归档</span>
                </template> -->
              </el-table-column>
              <!-- <el-table-column prop="hash.checknotice" label="审核说明"></el-table-column> -->
              <el-table-column prop="hash.op" label="创建人"></el-table-column>
              <el-table-column prop="hash.checker" label="审核人"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import test from '~/components/common/upload/test.vue';

export default {
  data() {
    return {
      dialogTableVisible0: true,
      ts: this.newStore(),
      activeName: 'first',
      detailData1: {},
      detailData: {},
      houseData: {},
      houseData1: {},
      isupload: '',
      owntypeArr: [],
      jdArr: [],
      isreload: true,
      danwei1Arr: [],
      danwei2Arr: [],
      houseList: [],
      houseList1: [],
      horgArr: [],
      hstatusArr: [],
      fwarea2: '0',
      fwarea1: '0',
      renttable: [],
      renttable1: [],
      renttable7: [],
      renttable8: [],
      rentlist: {
        usetypename: '租赁',
      },
      rentlist2: [],
      shiyongArr: [],
      rentdate: [],
    };
  },
  props: {
    xh: String,
    hid: String,
    dotype: String,
  },
  computed: {
    renttime() {
      if (this.rentdate == null) {
        this.rentdate = [];
      }
      const date1 = new Date(this.rentdate[0]);
      const date2 = new Date(this.rentdate[1]);
      const date = (date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24);
      if (date) {
        return date + 1;
      }
      return 0;
    },
    rentdayfee() {
      const a = this.rentlist.rentfee;
      const b = this.renttime;
      const c = Number(this.rentlist.area1) + Number(this.rentlist.area2);
      if (a || b || c) {
        return (Number(a) / Number(b) / Number(c)).toFixed(10);
      }
      return 0;
    },
    buildyears() {
      const nowDate = new Date();
      const nowDateyear = nowDate.getFullYear();
      const buildDate = new Date(this.houseData.buildtime);
      const a = buildDate.getFullYear();
      let years = 0;
      // alert(a);
      if (a) {
        years = nowDateyear - a;
      } else {
        years = 0;
      }
      return years;
    },
  },
  created() {
    this.gethouserecord();
  },
  components: {
    test,
  },
  methods: {
    rowStyle(val) {
      if (val.row.hash.detailnumstatus == '0') {
        return 'background:#4ce64c';
      } else if (val.row.hash.detailnumstatus == '1') {
        return 'background:#ffff0070';
      }
      return '';
    },
    gethouserecord() {
      const req = {
        handle:
          '76ABA4BE996F68CEF9A9763329C1A0DDB2F91CF462D0C38B29837D1CD6055399',
        token: localStorage.getItem('token'),
        hid: this.hid,
        xh: this.xh,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // 房产基本信息
        this.detailData = ts.d.data.operation1[0].hash;
        this.detailData.glorg = localStorage.getItem('orgname');

        if (ts.d.data.operation2.length > 0) {
          this.detailData1 = ts.d.data.operation2[0].hash;
          // eslint-disable-next-line no-restricted-syntax
          for (const key in this.detailData1) {
            if (this.detailData1[key] == this.detailData[key]) {
              this.detailData1[key] = false;
            } else {
              this.detailData1[key] = true;
            }
          }
        } else {
          this.detailData1 = Object.assign({}, this.detailData);
        }


        // 房屋表格信息
        this.houseList = ts.d.data.operation3;
        this.houseList1 = ts.d.data.operation4;
        for (let i = 0; i < this.houseList.length; i += 1) {
          let hasnum = false;
          for (let j = 0; j < this.houseList1.length; j += 1) {
            if (this.houseList[i].hash.detailnum == this.houseList1[j].hash.detailnum) {
              hasnum = true;
              // eslint-disable-next-line no-restricted-syntax
              for (const key in this.houseList[i].hash) {
                if (this.houseList1[j].hash[key] == this.houseList[i].hash[key]) {
                  this.houseList1[j].hash[key] = false;
                } else {
                  this.houseList1[j].hash[key] = true;
                  this.houseList[i].hash.detailnumstatus = 1;
                }
              }
            }
          }
          if (!hasnum) {
            this.houseList[i].hash.detailnumstatus = 0;
          }
        }

        // 房屋租赁信息
        this.renttable = ts.d.data.operation5;
        this.renttable1 = ts.d.data.operation6;
        for (let i = 0; i < this.renttable.length; i += 1) {
          let hasnum = false;
          for (let j = 0; j < this.renttable1.length; j += 1) {
            if (this.renttable[i].hash.rentid == this.renttable1[j].hash.rentid) {
              hasnum = true;
              // eslint-disable-next-line no-restricted-syntax
              for (const key in this.renttable[i].hash) {
                if (this.renttable1[j].hash[key] == this.renttable[i].hash[key]) {
                  this.renttable1[j].hash[key] = false;
                } else {
                  this.renttable1[j].hash[key] = true;
                  this.renttable[i].hash.rentidstatus = 1;
                }
              }
            }
          }
          if (!hasnum) {
            this.renttable[i].hash.rentidstatus = 0;
          }
        }

        // 租金表格信息
        this.renttable7 = ts.d.data.operation7;
        this.renttable8 = ts.d.data.operation8;
        for (let i = 0; i < this.renttable7.length; i += 1) {
          let hasnum = false;
          for (let j = 0; j < this.renttable8.length; j += 1) {
            if (this.renttable7[i].hash.feeid == this.renttable8[j].hash.feeid) {
              hasnum = true;
              // eslint-disable-next-line no-restricted-syntax
              for (const key in this.renttable7[i].hash) {
                if (this.renttable8[j].hash[key] == this.renttable7[i].hash[key]) {
                  this.renttable8[j].hash[key] = false;
                } else {
                  this.renttable8[j].hash[key] = true;
                  this.renttable7[i].hash.detailnumstatus = 1;
                }
              }
              console.log(this.renttable8, '1');
            }
          }
          if (!hasnum) {
            this.renttable7[i].hash.detailnumstatus = 0;
          }
        }
        this.getSelectList('10', 'danwei1Arr');
        this.getSelectList('10', 'danwei2Arr', this.detailData.danwei1);
      });
    },
    checkhouse(item) {
      const req = {
        handle:
          '76ABA4BE996F68CEF9A9763329C1A0DDE6A242EBBCA11C3E0BD6761FDA133CD2',
        token: localStorage.getItem('token'),
        detailid: item.hash.detailid,
        xh: this.xh,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d);
        // 房屋详细信息
        this.houseData = ts.d.data.operation1[0].hash;
        this.fwarea1 = this.houseData.area1;
        this.fwarea2 = this.houseData.area2;
        if (ts.d.data.operation2.length > 0) {
          this.houseData1 = ts.d.data.operation2[0].hash;
          // eslint-disable-next-line no-restricted-syntax
          for (const key in this.houseData1) {
            if (this.houseData1[key] == this.houseData[key]) {
              this.houseData1[key] = false;
            } else {
              this.houseData1[key] = true;
            }
          }
        } else {
          this.houseData1 = Object.assign({}, this.houseData);
        }
        this.getSelectList('02', 'horgArr');
        this.getSelectList('03', 'hstatusArr');
        this.getSelectList('06', 'owntypeArr');
      });
    },
    checkrent(item) {
      const req = {
        handle:
          '76ABA4BE996F68CEF9A9763329C1A0DD281EABE5F01FD55CE930F30A002C4F7E',
        token: localStorage.getItem('token'),
        rentid: item.hash.rentid,
        xh: this.xh,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.rentlist = ts.d.data.operation1[0].hash;
        this.rentlist2 = ts.d.data.operation2;
        this.rentdate = [this.rentlist.rentstart, this.rentlist.rentend];
        this.isreload = false;
        this.$nextTick(() => {
          this.isreload = true;
        });
        this.getSelectList('14', 'shiyongArr');
      });
    },
    handleClick(val) {
      if (val.name == 'first') {
        this.gethouserecord();
      } else if (val.name == 'second') {
        console.log(val);
      }
    },
    getSelectList(codetype, td, supid) {
      const req2 = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts2) => {
        this[td] = ts2.d.data.operation1;
      });
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.xiugai2{
  background #4ce64c
  color #fff
}
.info-list {
  margin-top: 50px;
  border-top: 1px solid #ccc;
  text-align: center;

  .title {
    padding: 30px 0;
    font-weight: 600;
    font-size: 18px;
    color: #6699ff;
  }

  table {
    text-align: center;
    padding-left: 30px;
    cursor: pointer;
    border-collapse: collapse;

    td, th {
      border: 1px solid #ccc;
      font-size: 14px;
      color: #666;
      height: 40px;
    }

    thead {
      th {
        font-weight: 600;
        background-color: #F2F2F2;

        &:nth-of-type(1) {
          width: 40px;
        }

        &:nth-of-type(2) {
          width: 120px;
        }
      }
    }
  }
}

.code {
  padding: 7px 3px;
  height: 33px;
  line-height: 33px;
  position: relative;
  background: #69f;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
}

.errorMes {
  width: 160px;
  color: red;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

.weixiugai {
  background: #69f;
}

.item {
  i {
    color: red;
  }
}

.base_header {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  color: #69f;
}

.xiugai {
  background: #ffff0070;
}

.avatar ul li {
  float: left;
  width: 33%;
}

.info-wrapper .info-content .upload-btn[data-v-6b40dfc5] {
  background: #fff;
  width: 90px;
}

.item-info>>>.el-date-editor .el-range-separator {
  padding: 0;
  line-height: 22px;
}

.item-info >>>.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 300px;
  height: 30px;
}

.item-info >>>.el-input__inner {
  height: 30px;
  border-top: 2px solid #999;
  border-radius: 0;
}

.item-info >>>.el-input__icon {
  line-height: 22px;
  color: #333;
}

.avatar >>>.el-upload--picture-card {
  width: 90px;
  height: 90px;
  line-height: 100px;
  margin-top: 20px;
}

.avatar >>>.el-upload-list--picture-card .el-upload-list__item {
  width: 90px;
  height: 90px;
  margin-top: 20px;
}

.upload-btn >>>.el-upload-list__item {
  width: 160%;
}

.sub-btn >>> .el-button--success {
  background: #69f;
  border-color: #69f;
}

.sub-btn >>> .el-button {
  padding: 8px 20px;
}

.info-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  .info-w {
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: #69f;
    color: #fff;
    cursor: pointer;

    .info-c {
      width: 1200px;
      margin: 0 auto;

      .close {
        display: inline-block;
        margin-right: 20px;

        .iconfont {
          font-size: 20px;
        }
      }

      .title {
        display: inline-block;
        font-size: 18px;
      }
    }
  }

  .info-content {
    width: 1200px;
    min-height: 600px;
    margin: 0 auto 50px;

    .upload-btn {
      display: inline-block;
      vertical-align: top;
      margin-left: 5px;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      color: #fff;
    }

    .info-tab {
      cursor: pointer;
      border-bottom: 1px solid #ccc;

      .tab-item {
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 15px 0 15px -1px;
        background: #fff;

        &.active {
          background: #69f;
          color: #fff;
        }
      }
    }

    .item-info {
      position: relative;
      margin-bottom: 50px;

      .sub-btn {
        position: absolute;
        right: 190px;
        top: -60px;
        height: 40px;
        line-height: 40px;

        .save-btn, .add-btn {
          display: inline-block;
          margin-right: 15px;
        }
      }
      .left-info, .right-info {
        display: inline-block;
        vertical-align: top;
        width: 600px;

        .item {
          margin-top: 5px;
          height: 30px;
          line-height: 30px;

          &:nth-of-type(1) {
            margin-top: 15px;
          }

          &.icon {
            position: relative;

            .iconfont {
              position: absolute;
              top: 0;
              right: 190px;
            }
          }

          span {
            display: inline-block;
            vertical-align: top;
            width: 140px;
            color: #333333;
            font-weight: 600;
          }

          input {
            display: inline-block;
            vertical-align: top;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
          }

          select {
            display: inline-block;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
            text-align: right;

            &.min1 {
              width: 100px;
            }

            &.min2 {
              width: 200px;
              margin-left: -1px;
            }
          }

          &.textarea {
            height: 150px;

            textarea {
              width: 300px;
              height: 150px;
              border: 1px solid #ccc;
              border-top: 2px solid #999;
            }
          }

          &.spec {
            height: 70px;

            span {
              float: left;
            }

            .text {
              display: inline-block;

              input:nth-of-type(1) {
                width: 100px;
              }

              input:nth-of-type(2) {
                width: 200px;
              }

              &:nth-of-type(2) {
                margin-top: 5px;
              }
            }
          }

          &.spec2 {
            height: 30px;

            .text {
              display: inline-block;

              input {
                display: inline-block;
                vertical-align: top;
              }

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }

              select {
                display: inline-block;
                vertical-align: top;
                width: 100px;
              }
            }
          }

          &.spec3 {
            height: 70px;

            span {
              height: 70px;
              float: left;
            }

            .text {
              display: inline-block;
              margin-top: 5px;

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }
            }
          }

          &.spec4 {
            height: 70px;

            span {
              float: left;
              height: 70px;
            }

            input {
              margin-top: 5px;
            }
          }

          &.spec5 {
            .line {
              display: inline-block;
              vertical-align: middle;
              width: 20px;
              height: 1px;
              background: #ccc;
            }

            .iconfont {
              &:ntn-of-type(1) {
                right: 190px;
              }

              &:nth-of-type(2) {
                right: 350px;
              }
            }
          }
        }

        .upload {
          width: 400px;
          margin-top: 15px;
          text-align: center;

          .avatar {
            width: 400px;
            height: 175px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
          }

          .desc {
            margin-bottom: 15px;
          }

          .btn {
            display: inline-block;
            margin-bottom: 15px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            background: #69f;
            color: #fff;
          }
        }
      }

      &.base-info {
        .right-info {
          .item {
            margin-top: 6px;
          }
        }
      }

      &.rent-info {
        .right-info {
          .item {
            margin-top: 11px;

            &:nth-of-type(1) {
              margin-top: 15px;
            }
          }
        }
      }

      span {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}
</style>
